<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>商品详情页</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script type="text/javascript" src="/static/js/jquery-3.6.0.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .header-nav{
            background-color: black;
            height: 60px;
        }
        .header-nav-middle{
            width: 1200px;
            margin: 0 auto;
            height: 100%;
        }
        div{
            display: block;
        }
        .header-nav-item{
            margin-left: 25px;
            line-height: 56px;
            font-size: 16px;
            color: #aaa;
            cursor: pointer;
            text-decoration:none;
        }
        .header-nav-bottom{
            background-color: #f2f2f2;
            height: 60px;
        }
        .content{
            background-color: #f2f2f2;
            height: 650px;
        }
        .content-container{
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            /*background-color: red;*/
        }
        .detail-container{
            overflow: hidden;
            padding: 20px;
            background: #fff;
        }
        .detail-container-left{
            float: left;
        }
        .content-container-right{
            position: relative;
            float: left;
            width: 715px;
            min-height: 500px;
            margin-left: 40px;
        }
        .content-image{
            position: relative;
            width: 400px;
            height: 400px;
            box-sizing: border-box;
            border: 1px solid #dfdfdf;
            overflow: hidden;
            cursor: move;
        }
    /*    商品详情右边栏*/
        .content-right-title{
            margin-bottom: 20px;
            line-height: 25px;
            font-size: 18px;
            width: 715px;
            height: 25px;
        }
        .content-right-price{
            padding: 8px 15px;
            background: #f2f2f2;
            width: 686px;
            height: 53px;
        }
        .content-count{
            padding-top: 5px;
            margin-top: -20px;
            overflow: hidden;
            width: 715px;
            height: 42px;
        }
        .content-right-btn{
            width: 715px;
            height: 50px;
            overflow: hidden;
            margin-top: 20px;
        }
        /*消除浮动*/
        .content-right-btn,.content-desc div{
            content:'';
            display: block;
            clear: both;
        }
        .content-right-btn span{
            float: left;
            margin-right: 20px;
            text-align: center;
            line-height: 44px;
            font-size: 20px;
            color: #ce0f30;
            border: 1px solid #ce0f30;
            cursor: pointer;
        }
        .btn-addCart{
            width: 180px;
            height: 44px;
            background: #ce0f30;
            color: #fff !important;
        }
        .btn-buyCart{
            width: 180px;
        }
        .content-time{
            margin-top: 30px;
            width: 715px;
            height: 50px;
        }
        .time{
            margin-left: 30px;
        }
        .content-desc{
            margin-top: 30px;
        }
        .content-subtotal{
            margin-top: 30px;
        }
        .content-desc div,.content-time div,.content-count div,.content-subtotal div{
            display: inline-block;
            margin-right: 30px;
        }
        .btn-group{
            width: 100px;
            height: 28px;
        }
        .btn-default{
            width: 28px;
            font-size: 12px;
        }
        .btn-num{
            height: 28px;
            line-height: 28px;
        }
    </style>
</head>
<body>
<div>
<%--    导航--%>
    <div class="header-nav">
        <div class="header-nav-middle">
            <a href="/user/index.jsp" class="header-nav-item">LoveLife!</a>
            <a href="/user/index.jsp" class="header-nav-item">主页首页</a>
            <a href="javascript:void(0)" class="header-nav-item">活动中心</a>
            <a href="/user/PersonalCenter.jsp" class="header-nav-item">个人中心</a>
            <a href="/user/category.jsp" class="header-nav-item" id="header-nav-item" style="margin-left: 500px">我的购物车</a>
            <c:if test="${loginUser!=null}">
                <a href="/commons/login.jsp" class="header-nav-item">
                    <c:out value="${loginUser.account},你好！">
                    </c:out>
                </a>
            </c:if>
            <c:if test="${loginUser==null}">
                <a href="/commons/login.jsp" class="header-nav-item">登录</a>
            </c:if>
            <a href="/commons/register.jsp" class="header-nav-item">立即注册</a>
        </div>
    </div>
    <div class="header-nav-bottom"></div>
<%--    内容--%>
    <div class="content">
        <div class="content-container">
            <div class="detail-container">
                <div class="detail-container-left">
                    <div class="content-image" id="content-image"></div>
                </div>
                <div class="content-container-right">
                    <div class="content-right-title" id="content-right-title">鼠标垫</div>
                    <div class="content-right-price">
                        <label style="margin-top: 14px;float: left;width: 80px;line-height: 23px">售价：</label>
                        <span style="color:#ce0f30;font-size: 30px;vertical-align: middle;">￥</span>
                        <span id="newPrice" style="color:#ce0f30;font-size: 30px;vertical-align: middle;">00.00</span>
                    </div>
                    <div class="content-desc">
                        <div class="content-right-desc" id="content-right-desc">描述信息</div>
                        <div class="desc" id="desc" style="border: 1px solid #ce0f30;"></div>
                    </div>
                    <div class="content-time">
                        <div class="content-right-time">时间</div>
                        <div class="time" id="time"></div>
                    </div>
                    <div class="content-count">
                        <div class="content-right-count" style="line-height: 50px">选择数量</div>
                        <div class="btn-group" role="group" aria-label="...">
                            <button type="button" class="btn-default" id="btn-sub">-</button>
                            <span type="button" class="btn-num" id="btn-num">1</span>
<%--                            <input type="number" class="btn-num" id="">--%>
                            <button type="button" class="btn-default" id="btn-add">+</button>
                        </div>
                    </div>
                    <div class="content-subtotal">
                        <div class="title-subtotal">总价格</div>
                        <div class="subtotal" id="subtotal" style="margin-left: 20px">00.00</div>
                    </div>
                    <div class="content-right-btn">
                        <span class="btn-addCart" id="btn-addCart" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">加入购物车</span>
                        <input type="hidden" name="uid" id="uid" value="${loginUser.id}"/>
                        <span class="btn-buyCart" id="btn-buyCart">立即购买</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
<%--    底部--%>
    <div class="bottom">

    </div>
</div>
<div>

</div>
<script>
    $(function(){
        let gid = sessionStorage.getItem("gid");
        //获取商品详情
        $.getJSON("/goods.do",{method:"selectGoodById",gid:gid},function (good) {
            $("#desc").html("");
            $("#content-right-title").html("");
            $("#content-image").html("");
            $("#time").html("");
            $("#subtotal").html("");
            $("#newPrice").html("");


            $("#desc").append(good.decription);
            $("#content-right-title").append(good.author+":"+good.name);
            let $img = $("<img src='/user/images"+good.image+"'width='400px' />");
            $("#content-image").append($img);
            $("#time").append(good.publishtime);
            $("#subtotal").append(good.salesprice);
            $("#newPrice").append(good.salesprice);

            console.log(good);
        })
        $("#btn-sub").click(function () {
            let $newPrice = $("#newPrice").html();
            let $num = $("#btn-num").html();
            $("#btn-num").html("");
            if($num>1){
                $("#btn-num").html(Number($num)-1);
                //计算总价格
                $("#subtotal").html("")
                $("#subtotal").html((Number($num)-1)*Number($newPrice));
                $("#subtotal").append(".00")
            }else{
                $("#btn-num").html(1);
                $("#subtotal").html($newPrice);
            }

        })
        $("#btn-add").click(function () {
            let $num = $("#btn-num").html();
            $("#btn-num").html("");
            $("#btn-num").html(Number($num)+1);
            let $newPrice = $("#newPrice").html();
            //计算总价格
            $("#subtotal").html("")
            $("#subtotal").html((Number($num)+1)*Number($newPrice));
            $("#subtotal").append(".00");
        })
        //获取uid
        $("#btn-addCart").click(function () {
            let $num = $("#btn-num").html();
            //总价格
            let $subtotal = $("#subtotal").html();
            $.getJSON("/cart.do",{method:"addCart",uid:$("#uid").val(),gid:gid,num:$num,subtotal:$subtotal},function (resp) {
                console.log(resp);
                if (!resp) {
                    location.href="/commons/login.jsp";
                }else {
                    alert("加入购物车成功");
                }
            })
        })
        // 点击我的购物车判断该用户是否登录
        $("#header-nav-item").click(function () {
            if($("#uid").val()){
                location.href="/user/category.jsp";
            }else{
                alert("请您先登录！")
            }
        })
        //点击跳转支付界面
        $("#btn-buyCart").click(function () {
            if($("#uid").val()){
                location.href="/user/toPay.jsp";
                }else{
                    alert("请您先登录！")
                }
        })
    })
</script>
</body>
</html>
